#@weiXinLayout("房间预订详情页面")
#define weiXinMain()
#@navBar("房间预订详情页面",contextPath+"/weixin/room")
<div>
	<div class="swiper-container">
	    <div class="swiper-wrapper">
	        #for(x:unitRoom.imgs())
	        <div class="swiper-slide"><img class="slide-item" src="#(x??'')" alt=""></div>
	        #else
	        <div class="swiper-slide"><img class="slide-item" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=182036984,3812106202&fm=26&gp=0.jpg" alt=""></div>
	        #end
	    </div>
	    <div class="swiper-pagination"></div>
	</div>
	<div id="content" style="margin-bottom:45px;"></div>
	<div class="weui-tab ">
	    <div class="weui-tabbar tab-bar-fixbottom" style="display: flex;justify-content: space-between">
	        <div class="tel">价格：￥<span id="price"></span></div>
	        <div class="orderBtnContainer"id="orderBtn">点我预订房间</div>
	    </div>
	</div>
</div>

#end


#define weiXinCss()
<style>
    body{
        background-color: #EFEFF4;
    }

    .section-white{
        background-color: white;
        padding:5px;
        margin-bottom: 5px;
    }
    .desc,.content{
        color: #9d9d9d;
    }
    .orderBtnContainer{
        padding: 10px;
        background-color: #e2541f;
        color: white;
    }
    .tel{
        font-weight: bolder;
        font-size:18px ;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #e2541f;
        margin-left: 10px;
    }
    .content{
        text-indent: 1em;
    }
</style>
#end

#define weiXinJs()
<script type="text/x-mustache" id="template">
     {{#items}}

        <div class="section-white">
            <h4>{{name}}</h4>
            <p class="desc">
                所属客栈：{{unit.name}}<br/>
                客栈地址：{{unit.address}}<br/>
				联系电话：{{unit.mobile}}<br/>
                联系人：{{unit.charger}}<br/>
            </p>
        </div>

        <div class="section-white">
            <h4>房间简介</h4>
            <p class="content">{{desc}}</p>
        </div>

        <div class="section-white">
            <h4>配套设施</h4>
            <p class="desc">{{equip}}</p>
        </div>
     {{/items}}
</script>
<script>
    $(document).ready(function(){
        $(".swiper-container").swiper({
            loop: true,
            autoplay: 3000,
        });

        function initData(){
            var config ={
                "url":"#(contextPath)/weixin/room/queryRoomById",
                "data":{id:"#(id??'0')"},
                "successCallBack":function(resp){
                    var temp = $("#template").html();
                    var data =resp.data;
                    var content = Mustache.render(temp,{items:resp.data});
                    $("#content").html(content);
                    $("#price").html(data.price);
                }
            }
            var ajax = new AjaxUtils(config);
            ajax.executeRequest();
        }
        initData();

        $("#orderBtn").click(function(){
            window.location.href="#(contextPath)/weixin/room/roomOrder?id=#(id??'0')"
        })

    })
</script>
#end